Font Family |
您所在的位置:网站首页 › font replace › Font Family |
Typography Font FamilyUtilities for controlling the font family of an element. Quick referenceClassPropertiesfont-sansfont-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-seriffont-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; font-monofont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; Basic usage Setting the font familyYou can control the typeface of text using the font family utilities. font-sansThe quick brown fox jumps over the lazy dog. font-serifThe quick brown fox jumps over the lazy dog. font-monoThe quick brown fox jumps over the lazy dog. The quick brown fox ... The quick brown fox ... The quick brown fox ... Applying conditionally Hover, focus, and other statesTailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:font-serif to only apply the font-serif utility on hover. For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation. Breakpoints and media queriesYou can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:font-serif to apply the font-serif utility at only medium screen sizes and above. To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers. Using custom values Customizing your themeBy default, Tailwind provides three font family utilities: a cross-browser sans-serif stack, a cross-browser serif stack, and a cross-browser monospaced stack. You can change, add, or remove these by editing the theme.fontFamily section of your Tailwind config. tailwind.config.jsmodule.exports = { theme: { fontFamily: { 'sans': ['ui-sans-serif', 'system-ui', ...], 'serif': ['ui-serif', 'Georgia', ...], 'mono': ['ui-monospace', 'SFMono-Regular', ...], 'display': ['Oswald', ...], 'body': ['"Open Sans"', ...], } } }Font families can be specified as an array or as a simple comma-delimited string: { // Array format: 'sans': ['Helvetica', 'Arial', 'sans-serif'], // Comma-delimited format: 'sans': 'Helvetica, Arial, sans-serif', }Note that Tailwind does not automatically escape font names for you. If you’re using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters. { // Won't work: 'sans': ['Exo 2', ...], // Add quotes: 'sans': ['"Exo 2"', ...], // ...or escape the space: 'sans': ['Exo\\ 2', ...], }Learn more about customizing the default theme in the theme customization documentation. Providing default font settingsYou can optionally provide default font-feature-settings and font-variation-settings for each font in your project using a tuple of the form [fontFamilies, { fontFeatureSettings, fontVariationSettings }] when configuring custom fonts. tailwind.config.jsmodule.exports = { theme: { fontFamily: { sans: [ "Inter var, sans-serif", { fontFeatureSettings: '"cv11", "ss01"', fontVariationSettings: '"opsz" 32' }, ], }, }, } Arbitrary valuesIf you need to use a one-off font-family value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value. Learn more about arbitrary value support in the arbitrary values documentation. Customizing the default fontFor convenience, Preflight sets the font family on the html element to match your configured sans font, so one way to change the default font for your project is to customize the sans key in your fontFamily configuration: tailwind.config.jsconst defaultTheme = require('tailwindcss/defaultTheme') module.exports = { theme: { extend: { fontFamily: { 'sans': ['Proxima Nova', ...defaultTheme.fontFamily.sans], }, } } }You can also customize the default font used in your project by adding a custom base style that sets the font-family property explicitly: main.css@tailwind base; @tailwind components; @tailwind utilities; @layer base { html { font-family: Proxima Nova, system-ui, sans-serif; } }This is the best approach if you have customized your font family utilities to have different names and don’t want there to be font-sans utility available in your project. Max-HeightFont SizeCopyright © 2023 Tailwind Labs Inc. Trademark Policy Edit this page on GitHubOn this pageQuick referenceBasic usageSetting the font familyApplying conditionallyHover, focus, and other statesBreakpoints and media queriesUsing custom valuesCustomizing your themeArbitrary valuesCustomizing the default fontFrom the creators of Tailwind CSS Make your ideas look awesome, without relying on a designer. “This is the survival kit I wish I had when I started building apps.”Derrick Reimer, SavvyCal |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |